<template lang="html">
  <div id="pageBox">
    <!-- <div class="topRecommend">
      <div class="leftRecommend fl">
        <img src="" alt="">
      </div>
      <div class="rightRecommend fr">
        <img src="" alt="">
      </div>
    </div> -->
    <div class="recommendList">
      <ul class="recommendBox">
        <li class="recommendItem" v-for="(v,i) in listData" :key="i"  @click="gotDetail(v.id)">
          <div class="itemImg">
            <img :src="v.coverImg" alt="">
          </div>
          <div class="itemContent">
            <p class="contentTitle">{{v.title}}</p>
            <p class="contentNote">已更新{{v.updatedPhase || 1}}期</p>
            <div class="heatMoney">
              <span v-if="v.popularity" class="heat fl">{{v.popularity}}人气</span>
              <span class="money fr">￥{{v.price || 0}}</span>
            </div>
          </div>
        </li>
      </ul>
      <div v-if="!lastPage" class="loadingMore" @click="onMore">
        加载更多
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:["listData", 'lastPage'],
  data(){
    return {

    }
  },
  methods:{
    gotDetail(id){
      let query = {
        id
      }
      this.$router.push({
        path:"/detailsCenter",
        query
      })
    },
    onMore() {
      this.$emit('more')
    }
  }
}
</script>

<style lang="less" scoped>
  #pageBox{
    // padding-top:20px;
    padding-bottom:20px;
    .topRecommend{
      width:100%;
      margin-bottom:20px;
      overflow:hidden;
      .leftRecommend,.rightRecommend{
        width:1.68rem;
        height:0.96rem;
        background:#999;
        img{
          width:100%;
        }
      }
    }
    .recommendList{
      width:100%;
      .recommendBox{
        width:100%;
      }
      .recommendItem{
        width:100%;
        display: blcok;
        margin-bottom:20px;
        overflow:hidden;
        .itemImg{
          width:1.64rem;
          height:1rem;
          background:#999;
          float: left;
          img{
            width:100%;
          }
        }
        .itemContent{
          position: relative;
          padding-left: 1.77rem;
          
          .contentTitle{
            font-weight: bold;
            font-size:0.16rem;
            height:0.44rem;
            line-height: 0.22rem;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin-bottom:6px;
          }
          .contentNote{
            color:#999;
            font-size:0.14rem;
          }
          .heatMoney{
            // padding-left:0.13rem;
            line-height: 0.16rem;
            color:red;
            .heat{
              font-size:0.12rem;
            }
            .money{
              font-size:0.16rem;
            }
          }
        }
      }
    }
  }
</style>
